<template>
  <view class="reg-two">
  	<m-nav :navStyle="navStyle" backColor="#FC2256">
  	  <block slot="content">Let's know you</block>
  	</m-nav>
    
    <view class="reg-two-inline">
      <view class="reg-two-title"> Pick a cool name </view>
      <view class="reg-two-content"> 
         <input class="reg-two-username" maxlength="20" placeholder="Your name" v-model="username"/>
      </view>
    </view>

    <view class="reg-two-inline">
      <view class="reg-two-title"> Email </view>
      <view class="reg-two-content"> 
         <input class="reg-two-username" maxlength="20" placeholder="Your email" v-model="email"/>
      </view>
    </view>
    
    <view class="reg-two-inline">
      <view class="reg-two-title"> Password </view>
      <view class="reg-two-content"> 
         <input class="reg-two-username" maxlength="20" placeholder="Your Password" v-model="password"/>
      </view>
    </view>
    
    <view class="reg-two-inline">
      <view class="reg-two-title"> When's your birthday? </view>
      <view class="reg-two-content"> 
        <picker class="picker-birthday" mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
          <input class="reg-two-username" maxlength="20" placeholder="Choose your brithady" v-model="birthday" disabled="true"/>
        </picker>
      </view>
    </view>
    
    <!-- 自动获取定位及城市
    <view class="reg-two-inline">
      <view class="reg-two-title"> Where's your country? </view>
      <view class="reg-two-content"> 
        <input class="reg-two-username" maxlength="20" placeholder="Choose your country" v-model="username"/>
      </view>
    </view>
    
    <view class="reg-two-inline">
      <view class="reg-two-title"> Where's your region? </view>
      <view class="reg-two-content"> 
         <input class="reg-two-username" maxlength="20" placeholder="Choose your region" v-model="username"/>
      </view>
    </view>
    
    <view class="reg-two-inline">
      <view class="reg-two-title"> Where's your city? </view>
      <view class="reg-two-content"> 
         <input class="reg-two-username" maxlength="20" placeholder="Choose your city" v-model="username"/>
      </view>
    </view>
    -->
    <view class="reg-two-inline">
      <view class="reg-two-agree-text">
        <checkbox value="cb" color="#000" style="transform:scale(0.7)" /> 
        <view>By continuing, I confirm I have reviewed and agree to the 
                          Service Agreement and the Privacy Policy.</view>   
      </view>
    </view>
    
    <view class="buttons">
      <view class="button" @tap="goHome"> DONE </view>
    </view>
    
  </view>
</template>

<script>
import mNav from '@/components/m-nav/m-nav.vue';
export default {
  components: {
    mNav
  },
  data() {
    return {
      navStyle:[{background:'#f7f7f7',color:'#FC2256','box-shadow': '2px 2px 6px #e1e1e1'}],
      username:'',
      email:'',
      password:'',
      birthday:''
    };
  },
  computed: {
    startDate() {
      console.log(this.getDate('start'));  
      return this.getDate('start');
    },
    endDate() {
      console.log(this.getDate('end'));
      return this.getDate('end');
    }
  },
  methods: {
    bindDateChange: function(e) {
        this.birthday = e.target.value
    },
    getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (type === 'start') {
            year = year - 80;
        } else if (type === 'end') {
            year = year - 18;
        }
        month = month > 9 ? month : '0' + month;;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
    },
    goHome() {
      uni.switchTab({
        url: '/pages/home/home'
      });
    },
    
  }
}
</script>

<style>

.reg-two {
  padding:44px 0;
}

.reg-two .reg-inline {
  margin:20px 0;
}

.reg-two .reg-two-title {
  font-size:28rpx;
  color:#444444;
  height:50px;
  line-height:50px;
  margin:0 20px;
}

.reg-two .reg-two-content {

}

.reg-two .reg-two-birthday {
  font-size:14px;
  background: #FFFFFF;
  border-radius: 30px;
  margin:0 20px;
  padding-left:30px;
  height:45px;
  line-height: 45px;
}

.reg-two .reg-two-username {
  background: #FFFFFF;
  border-radius: 30px;
  margin:0 20px;
  padding-left:30px;
  height:45px;
  line-height: 45px;
}

.reg-two .reg-two-agree-text {
  font-size:12px;
  color:#444444;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:20px;
}

.reg-two .buttons {
  font-size:12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top:40rpx;
}
  
.reg-two .button {
  font-size:18px;
  display: flex;
  justify-content: center;
  align-items: center;
  width:400rpx;
  height:80rpx;
  color:#fff;
  padding:10rpx 20rpx;
  border-radius: 80rpx;
  background: linear-gradient(left,#F5316F,#FF7B43 );
}


</style>
